<script setup>
import { watchEffect } from "vue";
import {getNewsList} from "../api/news"
import Loading from "../components/Loading.vue";
import useLoadData from "../hooks/useLoadData";
import Card from "../components/Card.vue";
import dateFormat from "../hooks/DataFormat";
// const {isError,isLoading,data} = useLoadData(getNewsList())
// watchEffect(()=>{
// 	console.log(data.value);
// })
</script>
<template>
	<!-- <Loading :is-error="isError" :is-loading="isLoading" id="bj">	设定div布局方式为flex -->
<!--		<div class="header">	
			<van-search
			  shape="round"
			  background="var(--main-gradient)"
			  placeholder="请输入搜索关键词"
			/>
			<div class="search"></div>
		</div>
-->
		<!-- <div class="lunbo">	
			<van-swipe class="my-swipe" :height="250" :autoplay="3000" lazy-render indicator-color="white">
			  <van-swipe-item :key="data.id"  v-for="item,index in data.filter(x=>x.img)">
			 	<img class="swipe-img" :src="item.img"> 
			  </van-swipe-item>
			</van-swipe>
		</div> -->
		<div class="container">
			<div class="content">	<!-- 主体1 -->
			<h3>
				常用功能
			</h3>
			<div class="cygn">
				<router-link to="/recruit/search" class="cygn-item">
					<img class="icon" src="../assets/zhaopin.svg"/>
					<div>招募</div>
				</router-link>
				<router-link to="/project/search" class="cygn-item">
					<img class="icon" src="../assets/project.svg"/>
					<div>项目</div>
				</router-link>
				<router-link to="/project/create" class="cygn-item">
					<img class="icon" src="../assets/create.svg"/>
					<div>创建项目</div>
				</router-link>
				<router-link to="/developing" class="cygn-item">
					<img class="icon" src="../assets/zudui.svg"/>
					<div>竞赛组队</div>
				</router-link>
			</div>
		</div>

		</div>
	<!-- </Loading> -->
</template>

<style scoped>
	#bj {
		background-color: var(--main-background-color);
	}
	.container{
		padding: var(--page-padding);
		padding-top: 0px;
	}
	.lunbo {

		overflow: hidden;
	}
	.swipe-img{
		width: 100%;
	}
	
	.cygn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* flex-wrap: wrap; */
		border-radius: 15px;
		padding: 15px;
		background-color: white;
		box-shadow: var(--main-shadow);
	}
	
	.xyzx {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 100%;
		border-radius: 15px;
		box-shadow: var(--main-shadow);
		height: fit-content;
		padding: 2px 2px 2px 2px;
		margin: 0px 7px 0px 0px;
	}
	
	.van-cell-group {
		display: flex;
		flex-direction: column;
	}
	
	.cygn-item {
		display: flex;
		align-items: center;
		flex-direction: column;
		cursor: pointer;
		border-radius: 4px;
		padding: 5px;
		font-size: 10px;
		transition: all .3s;
	}

	.cygn-item .icon {
		width: 50%;
		max-width: 80px;
		margin-bottom: 5px;
	}
	.cygn-item:hover{
		background-color: rgb(221, 221, 221);
		border-radius: 4px;
		padding: 5px;
	}
	
	.my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    line-height: 150px;
	    text-align: center;
	    background-color: #66c6f2;
	}
	  
	.van-divider {
		color: #000000;
	}
	  
	.content h3 {
		display: inline-block;
		background-image: var(--main-gradient);
		background-size: 100% 20%;
		background-repeat: no-repeat;
		background-position: bottom;
		padding-bottom: 5px;
		font-weight: bold;
	}	
	.news-card{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 3px 0;
	}
	.news-title{
		width: 70%;
	}
	.news-date{
		font-size: 12px;
		color: var(--font-gray-color);
	}
</style>

<script>
</script>